
interface RectProps{
    x:number,
    y:number,
    width:number,
    height:number
}
interface LableProps{
    imgSrc:string,
    el:string
}
class Label {
    ctx:CanvasRenderingContext2D | null = null;
    startX: number = 0;
    startY: number = 0;
    endX: number = 0;
    endY: number = 0;
    width:number = 0;
    height:number = 0;
    isMove:boolean = false;
    rectList:RectProps[] = [];
    imgSrc:string = '';
    el:string = '';
    constructor(props:LableProps) {
        this.imgSrc = props.imgSrc;
        this.el = props.el;
        this.loadImg();
    }
    init(){
        if (this.ctx) return;
        const { ctx, cvs } = this.createCtx();
        this.ctx = ctx;
        cvs.style.zIndex = '10';
        cvs.addEventListener('mousedown', this.mouseDownHandler.bind(this), true);
        cvs.addEventListener('mousemove', this.mouseMoveHandler.bind(this), true);
        cvs.addEventListener('mouseup', this.mouseUpHandler.bind(this), true);
        cvs.addEventListener('wheel', this.wheelHanlder.bind(this), true);
    }
    createCtx(){
        const container = document.querySelector(this.el);
        const { width, height } = container!.getBoundingClientRect();
        const cvs = document.createElement('canvas');
        cvs.height = height;
        cvs.width = width;
        cvs.style.cssText = `
            position:absolute;
            top:0;
            left0
        `;
        const ctx = cvs.getContext('2d');
        container!.appendChild(cvs);
        return { ctx, cvs };
    }
    mouseDownHandler(e:MouseEvent){
        const rect = (e.target as HTMLCanvasElement).getBoundingClientRect();
        this.startX = e.clientX - rect.left;
        this.startY = e.clientY - rect.top;
        if(this.rectRange(this.startX, this.startY) ){
            return alert('***-');
        }
        this.isMove = true;
    }

    mouseMoveHandler(e:MouseEvent){
        if (!this.isMove) return;
        const rect = (e.target as HTMLCanvasElement).getBoundingClientRect();
        this.endX = e.clientX - rect.left;
        this.endY = e.clientY - rect.top;
        this.drawRect();
    }
    mouseUpHandler(){
        this.isMove = false;
        const rect:RectProps = { x:this.startX, y:this.startY, width:this.width, height:this.height };
        if(this.rectRange(this.endX, this.endY)){
            console.log('-------重叠');
            this.drawRect('---------');
        }else{
            this.rectList.push(rect);
        }
    }
    wheelHanlder(e:WheelEvent){
        const cvss = document.querySelectorAll('canvas');
        const container = document.querySelector(this.el);
        const rect = container!.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;
        const originX = mouseX / rect.width;
        const originY = mouseY / rect.height;
        console.log(cvss, 'cvss');
        const scaleDelta = 0.01;
        const scaleFactor = e.deltaY > 0 ? 1 - scaleDelta:1+scaleDelta;
        for(let i = 0; i< cvss.length;i++){
            cvss[i].style.cssText = `
            transfrom:scale(${scaleFactor});
            transformOrigin:${originX * 100}% ${originY * 100}%
            `;
        } 
    }
    drawRect(str?:string){
        console.log(str, '------------------');
        if (this.ctx){
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            this.loadImg();
            this.ctx.beginPath();
            this.ctx.fillStyle = '#cccc';
            this.width = this.endX - this.startX;
            this.height = this.endY - this.startY;
            this.rectList.length && this.rectList.forEach(item=>{
                this.ctx?.fillRect(item.x, item.y, item.width, item.height);
            });
            this.ctx.fillRect(this.startX, this.startY, this.width, this.height);
            this.ctx.closePath();
        }
    }

    loadImg(imgSrc?:string){
        const { ctx } = this.createCtx();
        const src = imgSrc || this.imgSrc;
        const img = new Image();
        img.onload = ()=>{
            ctx!.drawImage(img, 0, 0);
        };
        img.src = src;
    }

    rectRange(x:number, y:number){
        return this.rectList.some(item=> (x >= item.x && x <= (item.x + item.width)) && (y >= item.y && y <= (item.y + item.height)));
    }

}

export default Label;
